<template>
  <div class="person-viewer">
    <!-- Search Section -->
    <div class="search-section">
      <div class="search-container">
        <input v-model="searchQuery" type="text" class="search-input" placeholder="搜索人物..." @keyup.enter="searchPerson">
        <button class="search-button" @click="searchPerson">
          搜索
        </button>
      </div>
    </div>

    <div class="content-container">
      <!-- Chart Section - 左边 -->
      <div class="chart-section" :class="{ 'fullscreen': isFullscreen }">
        <div class="chart-card">
          <h2 class="card-title">
            关系图谱
          </h2>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-color center-color" />
              <span>中心人物</span>
            </div>
            <div class="legend-item">
              <span class="legend-color person-color" />
              <span>人物关系</span>
            </div>
            <div class="legend-item">
              <span class="legend-color org-color" />
              <span>机构关系</span>
            </div>
          </div>
          <div class="chart-controls">
            <button class="control-button" @click="zoomIn">
              <span class="control-icon">+</span>
            </button>
            <button class="control-button" @click="zoomOut">
              <span class="control-icon">-</span>
            </button>
            <button class="control-button" @click="resetZoom">
              <span class="control-icon">↺</span>
            </button>
            <button class="control-button" @click="toggleFullscreen">
              <span class="control-icon">⛶</span>
            </button>
          </div>
          <div v-if="selectedPerson" ref="chartContainer" class="chart-container" />
          <div v-else class="chart-container empty-chart">
            <div class="empty-chart-content">
              <h3 class="empty-title">
                暂无关系图谱数据
              </h3>
              <p class="empty-desc">
                请在左侧搜索框中输入人物姓名并点击搜索按钮
              </p>
            </div>
          </div>
          <div v-if="chartError" class="chart-error">
            图表加载失败: {{ chartError }}
          </div>
        </div>
      </div>

      <!-- Person Information Section - 右边 -->
      <div v-show="!isFullscreen" class="info-section">
        <div class="info-card">
          <h2 class="card-title">
            个人信息
          </h2>
          <div v-if="selectedPerson" class="info-content">
            <div class="info-item">
              <span class="info-label">姓名:</span>
              <span class="info-value">{{ selectedPerson.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别:</span>
              <span class="info-value">{{ selectedPerson.gender }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">民族:</span>
              <span class="info-value">{{ selectedPerson.grade }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年龄:</span>
              <span class="info-value">{{ selectedPerson.age }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">政治面貌:</span>
              <span class="info-value">{{ selectedPerson.political_status }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">婚姻状态:</span>
              <span class="info-value">{{ selectedPerson.marital_status }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">配偶:</span>
              <span class="info-value">{{ selectedPerson.spouse }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">机构:</span>
              <span class="info-value">{{ selectedPerson.organization }}</span>
            </div>

            <div class="info-item">
              <span class="info-label">职务:</span>
              <span class="info-value">{{ selectedPerson.position }}</span>
            </div>

            <div class="info-item">
              <span class="info-label">军衔:</span>
              <span class="info-value">{{ selectedPerson.military_rank }}</span>
            </div>

            <div class="info-item">
              <span class="info-label">出生日期:</span>
              <span class="info-value">{{ selectedPerson.birth_date }}</span>
            </div>

            <div class="info-item">
              <span class="info-label">入党时间:</span>
              <span class="info-value">{{ selectedPerson.party_join_date }}</span>
            </div>

            <div class="info-item">
              <span class="info-label">电话号码:</span>
              <span class="info-value">{{ selectedPerson.phone_number }}</span>
            </div>
          </div>
          <div v-else class="info-content empty-info">
            <div class="empty-info-content">
              <h3 class="empty-title">
                暂无个人信息
              </h3>
              <p class="empty-desc">
                搜索人物后将显示详细信息
              </p>
            </div>
          </div>
        </div>

        <!-- Events Section -->
        <div class="events-card">
          <h2 class="card-title">
            人物事件
          </h2>
          <div class="events-content">
            <div class="event-tabs">
              <div v-for="(tab, index) in eventTabs" :key="index"
                :class="['event-tab', { active: activeTab === tab.type }]" @click="activeTab = tab.type">
                {{ tab.name }}
              </div>
            </div>
            <div v-if="selectedPerson" class="event-list">
              <div v-for="(event, index) in filteredEvents" :key="index" class="event-item">
                <div class="event-date">
                  {{ event.date }}
                </div>
                <div class="event-content">
                  <div class="event-title">
                    {{ event.title }}
                  </div>
                  <div class="event-description">
                    {{ event.description }}
                  </div>
                </div>
              </div>
              <div v-if="filteredEvents.length === 0" class="no-events">
                暂无相关事件
              </div>
            </div>
            <div v-else class="event-list empty-events">
              <div class="empty-events-content">
                <h3 class="empty-title">
                  暂无事件数据
                </h3>
                <p class="empty-desc">
                  搜索人物后将显示相关事件
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonViewer',
  data() {
    return {
      searchQuery: '',
      selectedPerson: null,
      activeTab: 'all',
      eventTabs: [
        { name: '全部', type: 'all' },
        { name: '任务', type: 'task' },
        { name: '升职', type: 'promotion' },
        { name: '惩处', type: 'discipline' }
      ],
      chart: null,
      chartError: null,
      echartsLoaded: false,
      // 颜色映射
      colorMap: {
        center: {
          main: '#1890FF',
          gradient: new Array(2) // 将在初始化时填充
        },
        person: {
          main: '#52C41A',
          gradient: new Array(2)
        },
        org: {
          main: '#FA8C16',
          gradient: new Array(2)
        }
      },
      zoomLevel: 1,
      isFullscreen: false
    }
  },
  computed: {
    filteredEvents() {
      if (!this.selectedPerson) return [];

      if (this.activeTab === 'all') {
        return this.selectedPerson.events;
      } else {
        return this.selectedPerson.events.filter(event => event.type === this.activeTab);
      }
    }
  },
  mounted() {
    // 在组件挂载后立即加载ECharts
    this.loadECharts();

    // 监听ESC键退出全屏
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    // 清理图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }

    // 移除事件监听
    window.removeEventListener('resize', this.resizeChart);
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    quickSearch(name) {
      this.searchQuery = name;
      this.searchPerson();
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;

      // 在下一个渲染周期调整图表大小
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
    handleKeyDown(e) {
      // 按ESC键退出全屏
      if (e.key === 'Escape' && this.isFullscreen) {
        this.isFullscreen = false;
        this.$nextTick(() => {
          if (this.chart) {
            this.chart.resize();
          }
        });
      }
    },
    loadECharts() {
      // 如果已经加载过，直接返回
      if (window.echarts) {
        this.echartsLoaded = true;
        console.log('ECharts已加载');
        return Promise.resolve();
      }

      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
        script.async = true;

        script.onload = () => {
          console.log('ECharts加载成功');
          this.echartsLoaded = true;
          resolve();
        };

        script.onerror = (e) => {
          console.error('ECharts加载失败', e);
          this.chartError = '加载图表库失败，请刷新页面重试';
          reject(e);
        };

        document.head.appendChild(script);
      });
    },
    searchPerson() {
      this.chartError = null;

      // 模拟API调用，实际应用中应该调用后端API
      if (this.searchQuery.trim() === '') return;

      // 模拟数据，实际应用中应该从API获取
      this.selectedPerson = {
        name: '张三',
        gender: '男',
        grade: '高级',
        position: '技术主管',
        events: [
          {
            type: 'task',
            date: '2023-01-15',
            title: '项目任务',
            description: '负责XX项目的架构设计和技术选型'
          },
          {
            type: 'promotion',
            date: '2022-06-10',
            title: '晋升',
            description: '从开发工程师晋升为技术主管'
          },
          {
            type: 'task',
            date: '2022-03-22',
            title: '技术攻关',
            description: '解决了系统性能瓶颈问题'
          },
          {
            type: 'discipline',
            date: '2021-11-05',
            title: '警告',
            description: '因代码质量问题收到口头警告'
          }
        ],
        // 扩展关系数据，添加人物和机构
        relations: [
          // 人物关系
          {
            name: '李四',
            relation: '下属',
            value: 3,
            type: 'person',
            children: [
              { name: '张小明', relation: '团队成员', value: 2, type: 'person' },
              { name: '王小红', relation: '团队成员', value: 2, type: 'person' },
              { name: '刘小华', relation: '实习生', value: 1, type: 'person' }
            ]
          },
          {
            name: '王五',
            relation: '下属',
            value: 3,
            type: 'person',
            children: [
              { name: '赵小刚', relation: '团队成员', value: 2, type: 'person' },
              { name: '钱小强', relation: '团队成员', value: 2, type: 'person' }
            ]
          },
          {
            name: '赵六',
            relation: '同事',
            value: 2,
            type: 'person',
            children: [
              { name: '孙小梅', relation: '项目合作', value: 1, type: 'person' },
              { name: '周小伟', relation: '项目合作', value: 1, type: 'person' }
            ]
          },
          {
            name: '钱七',
            relation: '上级',
            value: 4,
            type: 'person',
            children: [
              { name: '吴小龙', relation: '部门同事', value: 2, type: 'person' },
              { name: '郑小虎', relation: '部门同事', value: 2, type: 'person' },
              { name: '冯小云', relation: '部门同事', value: 2, type: 'person' }
            ]
          },
          {
            name: '孙八',
            relation: '合作伙伴',
            value: 1,
            type: 'person',
            children: [
              { name: '陈小林', relation: '项目对接', value: 1, type: 'person' },
              { name: '杨小光', relation: '技术支持', value: 1, type: 'person' }
            ]
          },

          // 机构关系
          {
            name: '技术研发部',
            relation: '所属部门',
            value: 5,
            type: 'org',
            children: [
              { name: '前端团队', relation: '工作团队', value: 4, type: 'org' },
              { name: '后端团队', relation: '协作团队', value: 3, type: 'org' },
              { name: '测试团队', relation: '协作团队', value: 3, type: 'org' }
            ]
          },
          {
            name: '创新实验室',
            relation: '兼职部门',
            value: 2,
            type: 'org',
            children: [
              { name: '人工智能组', relation: '研究小组', value: 2, type: 'org' }
            ]
          },
          {
            name: '华东技术大学',
            relation: '毕业院校',
            value: 2,
            type: 'org',
            children: [
              { name: '计算机科学系', relation: '就读院系', value: 2, type: 'org' },
              { name: '校友会', relation: '成员单位', value: 1, type: 'org' }
            ]
          },
          {
            name: '行业标准委员会',
            relation: '外部组织',
            value: 1,
            type: 'org',
            children: [
              { name: '技术标准工作组', relation: '工作小组', value: 1, type: 'org' }
            ]
          }
        ]
      };

      // 确保ECharts已加载，然后初始化图表
      const initChartWithRetry = () => {
        // 如果ECharts已加载，直接初始化
        if (this.echartsLoaded) {
          this.$nextTick(() => {
            // 给DOM一点时间渲染
            setTimeout(() => {
              try {
                this.initChart();
              } catch (err) {
                console.error('初始化图表失败:', err);
                this.chartError = '初始化图表失败: ' + err.message;
              }
            }, 500);
          });
        } else {
          // 如果还没加载，先加载ECharts
          this.loadECharts()
            .then(() => {
              this.$nextTick(() => {
                setTimeout(() => {
                  try {
                    this.initChart();
                  } catch (err) {
                    console.error('初始化图表失败:', err);
                    this.chartError = '初始化图表失败: ' + err.message;
                  }
                }, 500);
              });
            })
            .catch(err => {
              console.error('加载ECharts失败:', err);
              this.chartError = '加载图表库失败，请刷新页面重试';
            });
        }
      };

      // 调用初始化函数
      initChartWithRetry();
    },
    // 预处理数据，直接在数据中添加颜色属性
    processChartData() {
      const centerName = this.selectedPerson.name;
      const echarts = window.echarts;

      // 初始化渐变色
      this.colorMap.center.gradient = [
        { offset: 0, color: '#1890FF' },
        { offset: 1, color: '#36CBCB' }
      ];

      this.colorMap.person.gradient = [
        { offset: 0, color: '#52C41A' },
        { offset: 1, color: '#B7EB8F' }
      ];

      this.colorMap.org.gradient = [
        { offset: 0, color: '#FA8C16' },
        { offset: 1, color: '#FFD591' }
      ];

      // 递归处理节点颜色
      const processNode = (node) => {
        // 设置节点颜色和样式
        if (node.name === centerName) {
          node.itemStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, this.colorMap.center.gradient),
            borderWidth: 2,
            borderColor: 'rgba(255, 255, 255, 0.8)',
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 2
          };
          node.nodeType = 'center';
        } else if (node.type === 'org') {
          node.itemStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, this.colorMap.org.gradient),
            borderWidth: 1.5,
            borderColor: 'rgba(255, 255, 255, 0.6)',
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowOffsetY: 1
          };
          node.nodeType = 'org';
        } else {
          node.itemStyle = {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, this.colorMap.person.gradient),
            borderWidth: 1.5,
            borderColor: 'rgba(255, 255, 255, 0.6)',
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 5,
            shadowOffsetX: 0,
            shadowOffsetY: 1
          };
          node.nodeType = 'person';
        }

        // 设置标签样式，避免覆盖关系线
        node.label = {
          show: true,
          position: function (params) {
            // 动态计算最佳位置，避免遮挡
            let type = params.data.type || '';
            // 中心节点右侧，其他节点根据位置分布
            if (params.data.nodeType === 'center') return 'right';
            if (type === 'org') return 'bottom';
            // 一般性的分布，避免标签重叠
            return ['right', 'top', 'left', 'bottom'][Math.floor(Math.random() * 4)];
          },
          distance: 30,
          fontSize: node.nodeType === 'center' ? 14 : 12,
          fontWeight: node.nodeType === 'center' ? 'bold' : 'normal',
          color: '#333',
          // 移除背景，让文字不遮挡节点
          backgroundColor: 'transparent',
          // 添加微弱文字阴影提高可读性
          textShadowColor: '#fff',
          textShadowBlur: 3,
          textShadowOffsetX: 0,
          textShadowOffsetY: 0,
          padding: [0, 0],
          borderWidth: 0,
          borderRadius: 0
        };

        // 处理子节点
        if (node.children && node.children.length > 0) {
          node.children.forEach(child => processNode(child));
        }

        return node;
      };

      // 创建根节点
      const rootNode = {
        name: centerName,
        value: 10,
        type: 'person',
        children: []
      };

      // 添加关系节点
      if (this.selectedPerson.relations && this.selectedPerson.relations.length > 0) {
        rootNode.children = this.selectedPerson.relations.map(rel => {
          const node = {
            name: rel.name,
            value: rel.value,
            relation: rel.relation,
            type: rel.type
          };

          // 添加子节点
          if (rel.children && rel.children.length > 0) {
            node.children = rel.children.map(child => ({
              name: child.name,
              value: child.value,
              relation: child.relation,
              type: child.type
            }));
          }

          return node;
        });
      }

      // 处理所有节点的颜色和样式
      return processNode(rootNode);
    },
    initChart() {
      if (!this.selectedPerson) {
        console.error('没有选中的人物数据');
        this.chartError = '没有人物数据可显示';
        return;
      }

      if (!this.$refs.chartContainer) {
        console.error('图表容器不存在');
        this.chartError = '图表容器不存在';
        return;
      }

      // 确保echarts已经被引入
      if (!window.echarts) {
        console.error('ECharts未定义，请确保正确引入');
        this.chartError = 'ECharts未加载，请刷新页面重试';
        return;
      }

      console.log('初始化图表', this.$refs.chartContainer);

      // 如果图表已存在，先销毁
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }

      // 确保容器有尺寸
      const container = this.$refs.chartContainer;
      if (container.offsetHeight === 0 || container.offsetWidth === 0) {
        console.error('图表容器尺寸为0');
        container.style.height = '600px';
        container.style.width = '100%';
      }

      try {
        // 初始化图表
        this.chart = window.echarts.init(container);

        // 预处理数据，直接在数据中添加颜色属性
        const data = this.processChartData();

        // 配置选项
        const option = {
          backgroundColor: '#fafafa',
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255, 255, 255, 0.75)', // 半透明背景
            borderRadius: 8,
            textStyle: {
              color: '#333',
              fontSize: 13
            },
            padding: [10, 15],
            extraCssText: 'backdrop-filter: blur(2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);',
            formatter: params => {
              const data = params.data;
              if (!data) return '';

              // 根据节点类型设置不同的边框颜色
              let borderColor = '#1890FF'; // 默认蓝色
              if (data.nodeType === 'center') {
                borderColor = '#1890FF'; // 中心人物蓝色
              } else if (data.type === 'person') {
                borderColor = '#52C41A'; // 人物关系绿色
              } else if (data.type === 'org') {
                borderColor = '#FA8C16'; // 机构关系橙色
              }

              let tooltip = `
                <div style="border-left: 4px solid ${borderColor}; padding-left: 8px; margin-bottom: 8px;">
                  <div style="font-weight:bold; font-size:15px; color:#333; margin-bottom:5px;">${data.name}</div>
                </div>
              `;

              if (data.relation) {
                tooltip += `<div style="color:#666; margin-bottom:4px;">关系: <span style="color:#333; font-weight:500;">${data.relation}</span></div>`;
              }

              if (data.value) {
                tooltip += `<div style="color:#666; margin-bottom:4px;">关系强度: <span style="color:#333; font-weight:500;">${data.value}</span></div>`;
              }

              if (data.type) {
                tooltip += `<div style="color:#666;">类型: <span style="color:#333; font-weight:500;">${data.type === 'person' ? '人物' : '机构'}</span></div>`;
              }

              return tooltip;
            }
          },
          // 其他配置保持不变
          series: [
            {
              // 其他系列配置保持不变
              type: 'tree',
              data: [data],
              top: '10%',
              left: '10%',
              bottom: '10%',
              right: '20%',
              symbolSize: function (params) {
                // 根据节点类型和关系强度设置不同大小
                if (!params || !params.data) return 18;

                if (params.data.nodeType === 'center') {
                  return 24;  // 中心人物
                } else if (params.data.type === 'org') {
                  // 机构节点，根据关系强度调整大小
                  return 18 + (params.data.value || 0);
                } else {
                  // 普通人物节点，根据关系强度调整大小
                  return 18 + (params.data.value || 0);
                }
              },
              symbol: function (params) {
                // 根据节点类型使用不同的形状
                if (!params || !params.data) return 'circle';

                if (params.data.type === 'org') {
                  return 'roundRect';  // 机构使用圆角矩形
                } else {
                  return 'circle';  // 人物使用圆形
                }
              },
              initialTreeDepth: 2,  // 初始展开两级
              layout: 'radial',  // 使用放射状布局
              orient: 'LR',  // 从左到右布局
              roam: true,  // 允许缩放和平移
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: 'rgba(100, 100, 100, 0.3)' },
                    { offset: 1, color: 'rgba(150, 150, 150, 0.5)' }
                  ]
                },
                width: 1.5,
                curveness: 0.5,
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowOffsetY: 2
              },
              leaves: {
                label: {
                  position: 'outside',
                  verticalAlign: 'middle',
                  align: 'center',
                  distance: 15
                }
              },
              emphasis: {
                focus: 'descendant',
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: 'rgba(0, 0, 0, 0.2)',
                  borderWidth: 2,
                  borderColor: '#fff'
                },
                lineStyle: {
                  width: 2,
                  color: 'rgba(100, 100, 100, 0.4)',
                  shadowBlur: 5,
                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                },
                label: {
                  backgroundColor: 'rgba(255, 255, 255, 0.85)',
                  fontWeight: 'bold',
                  fontSize: params => params.data.nodeType === 'center' ? 15 : 13,
                  color: '#333'
                }
              },
              expandAndCollapse: true,
              animationDuration: 750,
              animationDurationUpdate: 750,
              animationEasing: 'elasticOut'
            }
          ]
        };

        // 设置图表选项
        this.chart.setOption(option);
        console.log('图表已初始化', option);

        // 响应窗口大小变化
        window.addEventListener('resize', this.resizeChart);
      } catch (err) {
        console.error('初始化图表时出错:', err);
        this.chartError = '初始化图表失败: ' + err.message;
      }
    },

    // 创建背景图案
    createPatternImage() {
      const canvas = document.createElement('canvas');
      canvas.width = 20;
      canvas.height = 20;
      const ctx = canvas.getContext('2d');

      // 填充白色背景
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, 20, 20);

      // 绘制点状图案
      ctx.fillStyle = 'rgba(0, 0, 0, 0.02)';
      ctx.beginPath();
      ctx.arc(10, 10, 0.8, 0, Math.PI * 2);
      ctx.fill();

      return canvas.toDataURL();
    },
    // 缩放控制
    zoomIn() {
      if (!this.chart) return;

      this.zoomLevel *= 1.2;
      this.chart.setOption({
        series: [{
          zoom: this.zoomLevel
        }]
      });
    },
    zoomOut() {
      if (!this.chart) return;

      this.zoomLevel /= 1.2;
      this.chart.setOption({
        series: [{
          zoom: this.zoomLevel
        }]
      });
    },
    resetZoom() {
      if (!this.chart) return;

      this.zoomLevel = 1;
      this.chart.setOption({
        series: [{
          zoom: 1
        }]
      });
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
}
</script>

<style scoped>
.person-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.search-section {
  padding: 12px 20px;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex: 0 0 auto;
}

.search-container {
  display: flex;
  max-width: 400px;
  margin: 0 auto 0 0; /* 将搜索框靠左对齐 */
  padding-left: 20px; /* 左侧添加一些内边距 */
}

.search-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 6px 0 0 6px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2),
    inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-button {
  padding: 12px 24px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.search-button:hover {
  background-color: #66b1ff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.search-button:active {
  background-color: #3a8ee6;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
  transform: translateY(1px);
}

.content-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  flex: 1;
  height: 800px; /* 减去搜索栏的高度 */
  overflow: hidden;
}

@media (min-width: 1024px) {
  .content-container {
    flex-direction: row;
    align-items: stretch;
    height: 800px;
  }

  .chart-section {
    width: 70%;
    height: 100%;
  }

  .info-section {
    width: 30%;
    height: 100%;
  }
}

.chart-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.info-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
}

.events-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.info-content {
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  flex: 1;
}

.info-content::-webkit-scrollbar {
  width: 6px;
}

.info-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.info-content::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.info-content::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.chart-container {
  flex: 1;
  padding: 20px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 0 0 12px 12px;
  position: relative;
}

.card-title {
  margin: 0;
  padding: 18px 20px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
  background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.chart-legend {
  display: flex;
  padding: 12px 20px;
  gap: 24px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
}

.legend-color {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.center-color {
  background: linear-gradient(135deg, #1890ff, #36cbcb);
}

.person-color {
  background: linear-gradient(135deg, #52c41a, #b7eb8f);
}

.org-color {
  background: linear-gradient(135deg, #fa8c16, #ffd591);
}

.chart-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 30px;
  right: 30px;
  gap: 10px;
  z-index: 1001; /* 确保高于其他元素 */
}

/* 全屏模式样式 */
.chart-section.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100vh !important;
  z-index: 1000;
  padding: 0;
  background-color: #f5f7fa;
}

.chart-section.fullscreen .chart-card {
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  position: relative; /* 添加相对定位 */
}

.chart-section.fullscreen .chart-container {
  height: calc(100% - 120px); /* 减去标题、图例和控制区域的高度 */
  position: relative; /* 确保是相对定位 */
}

/* 修改按钮容器位置，确保在全屏模式下正确显示 */
.chart-section.fullscreen .chart-controls {
  position: fixed; /* 使用固定定位代替绝对定位 */
  bottom: 50px;
  right: 50px;
}

.control-button {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.control-button:hover {
  border-color: #409eff;
  color: #409eff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f0f0f0;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  /* min-width: 60px; */
  color: #606266;
  font-weight: 500;
}

.info-value {
  color: #303133;
  flex: 1;
  font-weight: 500;
}

.events-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-tabs {
  display: flex;
  border-bottom: 1px solid #ebeef5;
  background-color: #fafafa;
  flex-shrink: 0;
}

.event-tab {
  padding: 12px 16px;
  cursor: pointer;
  color: #606266;
  font-size: 14px;
  transition: all 0.3s;
  position: relative;
}

.event-tab.active {
  color: #409eff;
  font-weight: 500;
}

.event-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #409eff;
  border-radius: 1px;
}

.event-list {
  padding: 12px 20px;
  flex: 1;
  overflow-y: auto;
  min-height: 50px;
}

.event-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s;
}

.event-item:hover {
  background-color: #f9f9f9;
}

.event-item:last-child {
  border-bottom: none;
}

.event-date {
  width: 100px;
  color: #909399;
  font-size: 13px;
}

.event-content {
  flex: 1;
}

.event-title {
  font-weight: 500;
  margin-bottom: 6px;
  color: #303133;
}

.event-description {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
}

.no-events {
  text-align: center;
  color: #909399;
  padding: 30px 0;
  font-size: 14px;
}

.chart-error {
  text-align: center;
  color: #f56c6c;
  padding: 20px;
  font-size: 14px;
  background-color: #fef0f0;
  border-radius: 4px;
  margin: 20px;
}

/* 空状态样式 */
.empty-chart {
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-chart-content,
.empty-info-content,
.empty-events-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.empty-title {
  font-size: 18px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.empty-desc {
  font-size: 14px;
  color: #909399;
  margin-bottom: 24px;
}

.sample-search {
  margin-top: 20px;
  text-align: center;
}

.sample-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.sample-tag {
  display: inline-block;
  padding: 6px 12px;
  background-color: #f0f2f5;
  color: #606266;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.sample-tag:hover {
  background-color: #e6f7ff;
  color: #409eff;
}

.empty-info,
.empty-events {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.event-tabs {
  flex-shrink: 0; /* 防止tabs被压缩 */
}

.card-title {
  flex-shrink: 0; /* 防止标题被压缩 */
}
</style>